<template>
  <div>
    <p>{{count}}</p>
    <!-- 绑定js语句 -->
    <button @click="count++">+1</button>

    <!-- 绑定事件处理方法 -->
    <button @click="add1">+1</button>
    <button @click="add2(2,$event)">+2</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    add1(event) {
      this.count ++;
      console.log('event', event, event.__proto__.constructor) // 是原生的 event 对象
    },
    add2(val, event) {
      this.count += val;
      console.log(event);
    },
    loadHandler() {
      // do something
    }
  },
  mounted() {
    window.addEventListener('myEvent', this.loadHandler)
  },
  beforeDestroy() {
    //【注意】用 vue 绑定的事件，组建销毁时会自动被解绑
    // 自己绑定的事件，需要自己销毁！！！
    window.removeEventListener('myEvent', this.loadHandler)
  }
}
</script>